<template>
    <div>
        <div id="pay" v-loading="loading" ref="divToConvert">
            <div class="reset " style="display: flex; justify-content: center; width: 100%">
                <div class="pay-voucher" id="voucher">
                    <div class="pay-voucher-name"></div>
                    <div class="pay-voucher-main">
                        <div class="pay-voucher-main-info">
                            <div class="list pb-1" style="border-bottom: unset; height: 50px;">
                                <div class="list-item span5">
                                    <span class="list-item-label" style="width: 80px;">申请单位：</span>
                                    <span class="list-item-value" style="width: 300px;">{{department.name}}</span>
                                </div>
                                <div class="list-item span2" style="width: 160px;">
                                    <span class="list-item-label">附单据</span>
                                    <span class="list-item-value">______</span>
                                    <span class="list-item-label">张</span>
                                </div>
                                <div class="span3 text-right" style="width: 240px;">
                                    <span class="list-item-label">申请时间：</span>
                                    <span class="list-item-value">
                                        {{msg.last_operation_time?msg.last_operation_time:currentDate}}
                                    </span>
                                </div>
                            </div>
                            <div class="content-box" >
                                <div class="list pb-0">
                                    <span class="list-item-label text-center vertical-line span2">用途</span>
                                    <span class="list-item-value span8">
                                        嫌疑人：{{bail.crime_name}}   案件：{{bail.case_title}}<br>
                                        {{msg.step == 2?'没收取保保证金':msg.step == 3?'退还取保保证金':'转移取保保证金'}}
                                    </span>
                                </div>
                                <div class="list pb-0">
                                    <span class="list-item-label text-center vertical-line span2">报销金额<br>（大写）</span>
                                    <span class="list-item-label text-center vertical-line span6">
                                        <!-- <span class="list-item-value">/</span>十
                                        <span class="list-item-value">/</span>个 -->
                                        <div class="daxie">
                                            <p v-for="(item,index) in bxPriceList" :key="index"><span class="list-item-value">{{item.value}}</span>{{item.label}}</p>
                                        </div>
                                    </span>
                                    <span class="list-item-label span2"
                                        style="flex-direction: column;align-items: flex-start; height: 100%;">
                                        <div class="list pb-0" style="height: 100%">
                                            <div class="list-item-label text-center vertical-line span1">千</div>
                                            <div class="list-item-label text-center vertical-line span1">百</div>
                                            <div class="list-item-label text-center vertical-line span1">十</div>
                                            <div class="list-item-label text-center vertical-line span1">万</div>
                                            <div class="list-item-label text-center vertical-line span1">千</div>
                                            <div class="list-item-label text-center vertical-line span1">百</div>
                                            <div class="list-item-label text-center vertical-line span1">十</div>
                                            <div class="list-item-label text-center vertical-line span1">元</div>
                                            <div class="list-item-label text-center vertical-line span1">角</div>
                                            <div class="list-item-label text-center span1">分</div>
                                        </div>
                                        <div class="list pb-0" style="border-bottom: unset; height: 100%;">
                                            <div style="color:rgba(33, 36, 40, 0.9)" v-for="item in amountList" class="list-item-label text-center vertical-line span1">{{item}}</div>
                                        </div>
                                    </span>
                                </div>
                                <div class="list pb-0">
                                    <span class="list-item-label text-center vertical-line span2">用款单位<br>负责人意见</span>
                                    <span class="list-item-value vertical-line span3">
                                        <div v-if="qzList[1]">
                                            <img v-if="qzList[1].img" :src="qzList[1].img" alt="">
                                            <span v-else>{{qzList[1].name}}</span>
                                        </div>
                                    </span>
                                    <span class="list-item-label text-center vertical-line span2">报销人</span>
                                    <span class="list-item-value span3">
                                        <div v-if="qzList[0]">
                                            <img v-if="qzList[0].img" :src="qzList[0].img" alt="">
                                            <span v-else>{{qzList[0].name}}</span>
                                        </div>
                                    </span>
                                </div>
                                <div class="list pb-0">
                                    <span class="list-item-label text-center vertical-line span2">财务部门<br>负责人意见</span>
                                    <span class="list-item-value vertical-line span3">
                                        <div v-if="qzList[3]">
                                            <img v-if="qzList[3].img" :src="qzList[3].img" alt="">
                                            <span v-else>{{qzList[3].name}}</span>
                                        </div>
                                    </span>
                                    <span class="list-item-label text-center vertical-line span2">财务会计审核</span>
                                    <span class="list-item-value span3">
                                        <div v-if="qzList[2]">
                                            <img v-if="qzList[2].img" :src="qzList[2].img" alt="">
                                            <span v-else>{{qzList[2].name}}</span>
                                        </div>
                                    </span>
                                </div>
                                <div class="list pb-0" style="border-bottom: unset;">
                                    <span class="list-item-label text-center vertical-line span2">局领导意见</span>
                                    <span class="list-item-value span8">
                                        <div v-if="qzList[4]">
                                            <img v-if="qzList[4].img" :src="qzList[4].img" alt="">
                                            <span v-else>{{qzList[4].name}}</span>
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pay-voucher-name">单据报销封面</div>
                </div>
            </div>

        </div>
        <div class="dialog-footer" v-if="isButton">
            <el-button :loading="submitLoading" :disabled="submitLoading" type="primary" @click="submit">
            {{isFq?'发起审批':'同意审批'}}
            </el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { defineProps, onMounted,ref,defineEmits,computed,includes } from "vue";
import { tyPass,getSignature,getBxfmInfo,submitApproval } from "@/api/bond/refund";
import { ElNotification } from 'element-plus'
import html2canvas from 'html2canvas';

const props = defineProps({
  bailId: {
    type: Number,
  },
  processId: {
    type: Object,
  },
  isFq:{
    type: Boolean,
  },
  isButton:{
    type: Boolean,
  }
});
const currentDate = ref('');
onMounted(() => {
    console.log("aaaa")
    getInfo()

    getQz()

    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1; // getMonth() 返回的月份是从 0 开始的
    const day = now.getDate();
    // 使用 padStart 方法确保月和日是两位数的格式
    const formattedMonth = month.toString().padStart(2, '0');
    const formattedDay = day.toString().padStart(2, '0');
    // 拼接年月日字符串
    currentDate.value = `${year}年${formattedMonth}月${formattedDay}日`;
});
let loading = ref(false)
let msg = ref({})
let bail = ref({})
let department = ref({})
let amountList = ref([])

let bxPriceList = ref([
    {label:'仟',value:'/'},
    {label:'佰',value:'/'},
    {label:'拾',value:'/'},
    {label:'万',value:'/'},
    {label:'仟',value:'/'},
    {label:'佰',value:'/'},
    {label:'拾',value:'/'},
    {label:'元',value:'/'},
    {label:'角',value:'/'},
    {label:'分',value:'/'},
])
const getInfo =()=>{
    loading.value = true
    let data = {
        bail_id:props.bailId,
        process_id:props.processId,
    }
    getBxfmInfo(data).then(res=>{
        if(res.code == 1){
            loading.value = false
            msg.value = res.data
            bail.value = res.data.bail
            department.value = res.data.department
      
            let originalArray = res.data.amount_alias.split('')
            let valuesToExclude = ['.',','];
            let arr = computed(() => {
                return originalArray.filter((item: string) => !valuesToExclude.includes(item));
            });
            amountList = computed(() => {
                const lengthNeeded = 10 - arr.value.length;
                const emptyArrays = Array.from({ length: lengthNeeded }, () => '');
                return [...emptyArrays, ...arr.value];
            });
            console.log(amountList.value)
            getPriceDx(res.data.amount_alias)
        }
    })
}


const getPriceDx = (price: string)=>{
    // '仟','佰','拾','万','仟','佰','拾','元','角','分'
    let newPrice = price.split('')
    let valuesToExclude = ['.',','];
    let arr1 = computed(() => {
        return newPrice.filter((item: string) => !valuesToExclude.includes(item));
    });
    arr1.value = arr1.value.splice(0, 1)

    const numberArray = computed(() => {
        return arr1.value.map((str: any) => Number(str));
    });
    console.log(numberArray.value)
    let arr2: { value: any; }[] = []
    numberArray.value.map((item: any)=>{
        arr2.push({
            value:numberInCapital(item)
        })
    })

    let arr3 = computed(() => {
        const lengthNeeded = 10 - arr2.length;
        const emptyArrays = Array.from({ length: lengthNeeded }, () => '');
        return [...emptyArrays, ...arr2];
    });

    bxPriceList.value.map((item: any,index: string | number)=>{
        if(arr3.value[index] && arr3.value[index].value){
            bxPriceList.value[index].value = arr3.value[index].value
        }
    })
    console.log(bxPriceList.value)
}

const numberInCapital = (number: number)=>{
      // 中文数字
      const cnNumbers = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
      // 处理个位数的函数
      const handleUnit = (unit: string | number) => cnNumbers[unit];
      // 将数字转换为中文大写数字字符串
      const convertToCapital = (num: { toString: () => any; }) => {
        let str = num.toString();
        return str.replace(/[0-9]/g, handleUnit);
      };
      // 确保只转换0-9的数字
      if (number >= 0 && number <= 9) {
        return convertToCapital(number);
      }
      return '';
    }

// 获取审批签章
let qzList = ref([])
const getQz = ()=>{
    let data = {
        bail_id:props.bailId,
        process_id:props.processId,
    }
    getSignature(data).then(res=>{
        if(res.code == 1){
            qzList.value = res.data
        }
    })
}

const emit = defineEmits(['closeDrawer']);

// 发起审批/同意审批
let divToConvert = ref(null);
let base64String = ref('');
let submitLoading = ref(false)
const submit = async()=>{
    submitLoading.value = true
    if (divToConvert.value) {
        try {
        const canvas = await html2canvas(divToConvert.value);
            base64String.value = canvas.toDataURL('image/png');
            console.log(base64String.value)
        } catch (error) {
            console.error('转换出错:', error);
            submitLoading.value = false
        }
    }
    let data = {
        bail_id:props.bailId,
        process_id:props.processId,
        voucherImg:base64String.value
    }
    console.log(data)

    let returnData = props.isFq?await submitApproval(data):await tyPass(data)
   
    console.log(returnData)
    if(returnData.code == 1){
        let text = props.isFq?'已发起审批':'已同意审批'
        emit("closeDrawer",true);
        ElNotification({ message:text, type: "success" });
        submitLoading.value = false
    }else{
        ElNotification({ message:returnData.msg, type: "warning" });
        submitLoading.value = false
    }
    // returnData.then((res: { code: number; msg: any; })=>{
        
    // })
    
}
</script>
<style scoped lang="scss">

.dialog-footer {
  margin-top:50px;
  text-align: center;
}
body {
    background-image: url(../img/qbhs/paybg.svg) !important;
    background-size: cover;
    background-repeat: no-repeat;
    line-height: normal;

}

.pay-voucher-main {
    position: relative;
    padding-right: 0;
    padding-top: calc(50px * var(--scale));
    padding-bottom: calc(50px * var(--scale));
}

.pay-voucher {
    width: 1083px !important;
    height: 456px !important;
    background-size: 100% 100%;
    margin-top: 30px;
}

.seal {
    position: absolute;
    width: calc(329px * var(--scale));
    height: calc(327px * var(--scale));
    top: calc(46px * var(--scale));
    right: calc(78px * var(--scale));
}

.list {
    width: 100% !important;
    display: flex;
    justify-content: space-between;
}

.content-box {
    width: 100% !important;
    height: 315px;
    border: 2px solid rgba(152, 158, 167, 0.25);
    display: flex;
    flex-direction: column;
}

.content-box .list {
    height: 20%;
}

.content-box .vertical-line {
    border-right: 1px solid rgba(152, 158, 167, 0.25);
    height: 100%;
}

.content-box .list-item-label {
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-item-value {
    font-size: 16px;
}

.content-box .list-item-value {
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.span1 {
    width: 10%;
    &:last-child{
        border-right:none;
    }
}

.span2 {
    width: 20%;
}

.span3 {
    width: 30%;
}

.span4 {
    width: 40%;
}

.span5 {
    width: 50%;
}

.span6 {
    width: 60%;
}

.span7 {
    width: 70%;
}

.span8 {
    width: 80%;
}

.span9 {
    width: 90%;
}

.span10 {
    width: 100%;
}

.pay-voucher-main-info {
    width: 100%;
}

.pb73 {
    padding-bottom: calc(73px * var(--scale)) !important;
    justify-content: start;
}

.qbtime {
    padding-left: 30px;
}

.print {
    color: #0F88F8;
    cursor: pointer;
    margin-left: 8px;
}

@media print {
    #voucher {
        orientation: portrait;
        width: 100%;
        height: 100%;
    }
}

.signature {
    height: 60px;
}

.signature_min {
    height: 40px;
}

.list-item {
    display: flex;
    align-items: center;
}

.content {
    padding: 0 !important;
}

#pay {
    width: 1084px;
    height: 486px;
    --scale: 1;
    box-sizing: border-box;
}

.pay-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: calc(78px * var(--scale));
}

.pay-head-l {
    display: flex;
    align-items: flex-end;
}

.pay-head-icon {
    width: calc(79px * var(--scale));
    height: calc(85px * var(--scale));
}

.pay-head-title {
    font-size: calc(40px * var(--scale));
    padding-left: calc(15px * var(--scale));
    font-weight: 600;
    color: rgba(33, 36, 40, 0.90);
    position: relative;

    &::before {
        content: '在线缴费系统';
        font-size: calc(80px * var(--scale));
        position: absolute;
        bottom: 0;
        color: rgba(33, 36, 40, 0.10);
    }
}

.pay-head-r {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.pay-head-r #week {
    color: rgba(33, 36, 40, 0.40);
    font-size: calc(20px * var(--scale));
}

.pay-head-r #timeDom {
    font-size: calc(24px * var(--scale));
}

.pay-voucher {
    width: calc(1083px * var(--scale));
    height: calc(456px * var(--scale));
    background-image: url(@/assets/voucherBg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
}

.pay-voucher-name {
    padding: calc(24px * var(--scale)) calc(19px * var(--scale)) calc(24px * var(--scale)) calc(20px * var(--scale));
    /* 24px 19px 24px 20px; */
    width: calc(63px * var(--scale));
    height: 100%;
    box-sizing: border-box;
    color: rgba(33, 36, 40, 0.40);
    text-align: center;
    font-size: calc(16px * var(--scale));
    font-weight: 400;
    display: flex;
    align-items: center;
    line-height: 1.5;
    justify-content: space-between;
}

.pay-voucher-main {
    padding: calc(32px * var(--scale));
    box-sizing: border-box;
    margin-left: calc(2px * var(--scale));
    width: calc(100% - 65px * var(--scale));
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding-right: 0;
}

.pay-voucher-main-info .list {
    width: calc(698px * var(--scale));
    border-bottom: 1px solid rgba(152, 158, 167, 0.25);
    font-size: calc(16px * var(--scale));
    display: flex;
    align-items: center;
}

.pr58 {
    padding-right: calc(58px * var(--scale));
}

.pt16 {
    padding-top: calc(16px * var(--scale));
}

.btd0 {
    border-bottom: none !important;
}

.list .list-item-label {
    color: rgba(33, 36, 40, 0.40);
}

.list .list-item-value {
    color: rgba(33, 36, 40, 0.90);
    font-weight: 550;
}
.list .list-item-value img{
    width: 90px;
}

.list .list-items {
    display: flex;
    flex-direction: column;

}

.list .list-items-value {
    color: rgba(33, 36, 40, 0.90);
    font-size: calc(24px * var(--scale));
    font-weight: 550;
    margin-top: calc(8px * var(--scale));
}

.list .line {
    width: 1px;
    margin: 0 calc(40px * var(--scale));
    height: calc(33px * var(--scale));
    background: rgba(152, 158, 167, 0.25);
}

.list .pay-status {
    width: calc(294px * var(--scale));
    height: calc(40px * var(--scale));
    border-radius: calc(4px * var(--scale));
    background: rgba(248, 15, 15, 0.80);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(10px * var(--scale));

    &::before {
        content: '';
        width: calc(24px * var(--scale));
        height: calc(24px * var(--scale));
        background-image: url(../img/qbhs/warn.svg);
        background-size: cover;
        background-repeat: no-repeat;
    }
}

.list .tips {
    color: #000;
    text-align: justify;
    font-size: calc(18px * var(--scale));
    margin-top: calc(38px * var(--scale));
    padding: calc(16px * var(--scale)) 0;
}

.pay-voucher-main-qrcode {
    padding-left: calc(32px * var(--scale));
    box-sizing: border-box;
}

.pay-voucher-main-qrcode .qrcode,
.qrcode .qrcodeAddress {
    width: calc(224px * var(--scale));
    height: calc(224px * var(--scale));
}

.qrcode-tips {
    color: rgba(248, 15, 15, 0.80);
    margin-top: calc(8px * var(--scale));
    font-size: calc(14px * var(--scale));
}

.pay-price {
    margin-top: calc(65px * var(--scale));
}

.pay-price-label {
    color: rgba(33, 36, 40, 0.40);
    font-size: calc(14px * var(--scale));
}

.pay-price-value {
    color: #FF3D00;
    font-size: calc(40px * var(--scale));
    font-weight: 550;

    &::before {
        content: "￥";
        color: rgba(33, 36, 40, 0.25);
        font-size: calc(24px * var(--scale));
    }

    &::after {
        content: attr(data-float);
        color: rgba(255, 61, 0, 0.30);
    }
}

.copyright {
    position: absolute;
    bottom: calc(26px * var(--scale));
    color: rgba(33, 36, 40, 0.40);
    text-align: center;
    font-size: calc(16px * var(--scale));
    z-index: 99;
    width: calc(100% - 68px * var(--scale));
}


p {
    padding: 0 !important;
    margin: 0 !important;
}

.home_content_box {
    display: flex;
    padding: 24px;
}

.top_statistics {
    display: flex;
}

/*当前银行信息*/
.bank_ye {
    width: 400px;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
    border-radius: 14px;
}

.bank_ye .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px !important;
    padding: 30px 25px 0 25px;
}

.bank_ye .ye .title {
    font-size: 14px;
    color: #718EBF;
}

.bank_ye .ye .price {
    font-size: 30px;
    color: #343C6A;
    display: flex;
    align-items: center;
    margin: 3px 0 21px 0 !important;
}

.bank_ye .ye .price span {
    font-size: 24px;
    margin-right: 4px;
}

.bank_ye .time .title {
    font-size: 12px;
    color: #718EBF;
}

.bank_ye .time .price {
    font-size: 15px;
    color: #343C6A;
}

.bank_ye .switch_box {
    display: flex;
    align-items: center;
    justify-content: right;
}

.bank_ye .switch_box .text {
    color: #343C6A;
    font-size: 13px;
    margin-right: 4px !important;
}

.bank_ye .switch_box .switch {
    width: 64px;
    height: 22px;
    line-height: 22px;
    border-radius: 2px;
    background: rgba(87, 156, 255, 0.1);
    font-size: 13px;
    color: #579CFF;
    text-align: center;
}

.bank_ye .icon {
    margin-top: 24px !important;
}

.bank_ye .num_box {
    height: 94px;
    border-top: 1px solid #DFEAF2;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bank_ye .num_box .num {
    font-size: 22px;
    color: #343C6A;
}

.bank_ye .num_box .copy {
    width: 52px;
    height: 26px;
    line-height: 26px;
    border-radius: 50px;
    background: rgba(52, 60, 106, 0.05);
    text-align: center;
    font-size: 13px;
    color: #343C6A;
    cursor: pointer;
}

/*缴费总额*/
.total_price {
    width: 250px;
    background: linear-gradient(311deg, #539BFF 7%, #2D60FF 85%);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
    margin-left: 25px;
    border-radius: 8px;
    position: relative;
}

.total_price .price_box {
    padding: 33px 13px 0 16px;
}

.total_price .price_box .title {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #FFFFFF;
    margin-bottom: 14px;
}

.total_price .price_box .title .label {
    width: 35px;
    height: 18px;
    line-height: 18px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 12px;
    text-align: center;
}

.total_price .price {
    display: flex;
}

.total_price .price .num {
    font-size: 26px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

.total_price .price .num span {
    font-size: 20px;
    margin-right: 3px;
}

.total_price .price .hb {
    font-size: 9px;
    color: #FFC917;
    margin-left: 7px;
    display: flex;
    align-items: center;
}

.total_price .price .hb img {
    margin-right: 4px
}

.total_price .icon {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 9px 4px 9px !important;
}

/*入账信息*/
.rz_box {
    margin-left: 25px;
}

.rz_box .top {
    width: 340px;
    height: 125px;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 18px 20px 8px 20px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
}

.rz_box .rz_title {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #718EBF;
}

.rz_box .rz_title .label {
    width: 35px;
    height: 18px;
    line-height: 18px;
    border-radius: 2px;
    background: rgba(140, 187, 255, 0.1);
    font-size: 12px;
    color: #579CFF;
    text-align: center;
    margin-left: 5px !important;
}

.rz_box .price {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 27px;
    color: #343C6A;
    margin-top: 6px;
}

.rz_box .price span {
    font-size: 22px;
}

.rz_box .hb {
    font-size: 9px;
    color: #FF4A4A;
    margin-left: 7px;
    display: flex;
    align-items: center;
}

.rz_box .hb img {
    margin-right: 4px
}

.rz_box .dow {
    margin-top: 20px;
}

.blue {
    color: #007AFF !important;
}

/*今日收款表格*/
.table_box {
    background: #fff;
    padding: 0 25px;
    border-radius: 8px;
    margin-top: 30px;
    padding-bottom: 30px;
}

.table_box .title_box {
    padding: 21px 0 28px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table_box .title_box .title {
    display: flex;
    font-size: 16px;
    color: #323C4F;
    align-items: center;
    font-weight: bold;
}

.table_box .title_box .title span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: #007AFF;
    margin-right: 12px;
}

.table_box .title_box a {
    font-size: 14px;
    color: #6E789A;
}

.table_box .lanmu {
    display: flex;
    margin-bottom: 21px;
}

.table_box .lanmu p {
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    border: 1px solid #007AFF;
    font-size: 14px;
    text-align: center;
    color: #007AFF;
    margin-right: 10px !important;
    cursor: pointer;
}

.table_box .lanmu .on {
    background: #007AFF;
    color: #fff;
}

.table_box th {
    color: #5B6388;
    text-align: center;
}

.table_box td {
    color: #5B6388;
    text-align: center;
    height: 42px;
    line-height: 42px !important;
}

.table_box td .status {
    width: 45px;
    height: 20px;
    line-height: 20px;
    border-radius: 5px;
    font-size: 12px;
    text-align: center;
    margin: 10px auto 0 auto !important;
}

.table_box td .on {
    background: #EDF4FF;
    color: #3A86F4;
}

.table_box td .on1 {
    background: #FFEAEA;
    color: #F64040;
}

.table_box .price {
    color: #3A86F4;
}

.table_box .on_jf {
    color: #00BB1C
}

.table_box .see {
    display: inline-block;
    width: 50px;
    height: 25px;
    line-height: 25px;
    border-radius: 5px;
    background: #FFFFFF;
    border: 1px solid #3A86F4;
    color: #3A86F4;
    transition: all 0.3s;
}

.table_box .see:hover {
    background: #3A86F4;
    color: #fff;
}

/*取保金额总览*/
.zl_box .price_box {
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    display: flex;
    padding: 30px 0 25px 0;
    margin-bottom: 36px;
}

.zl_box .price_box .box1 {
    margin-left: 50px;
}

.zl_box .price_box .box1 .name {
    font-size: 14px;
    color: #3D3D3D;
    display: flex;
    align-items: center;
}

.bigname {
    font-size: 14px !important;
}

.zl_box .price_box .box1 .name span {
    padding: 0 10px;
    height: 18px;
    line-height: 18px;
    border-radius: 4px;
    background: #FFEAEB;
    font-size: 12px;
    color: #FE6470;
    margin-left: 5px;
}

.zl_box .price_box .box1 .num {
    font-size: 20px;
    color: #FF6A00;
    font-weight: 500;
    margin-top: 14px !important;
}

.zl_box .line {
    width: 1px;
    height: 60px;
    background: #D8D8D8;
    margin-left: 56px !important;
}

.zl_box .img {
    display: flex;
    align-items: center;
    color: #666 !important;
    font-size: 16px;
}

.zl_box .img img {
    margin-right: 14px;
}

/*待办提醒*/
.right_box {
    margin-left: 25px;
}

.db_box {
    width: 420px;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 17px 5px 0 22px;
}

.db_box .title {
    font-size: 16px;
    font-weight: bold;
}

.db_box .top {
    display: flex;
    margin-top: 37px;
    border-bottom: 1px solid #D8D8D8;
    padding-bottom: 30px;
}

.db_box .top:last-child {
    border-bottom: none;
}

.db_box .top>div {
    margin-right: 60px;
}

.db_box .top>div:last-child {
    margin-right: 0;
}

.db_box .top .text {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 10px;
}

.db_box .top .num {
    font-size: 26px;
    color: #FF6A00;
}

/*公告动态*/
.gg_box {
    width: 420px;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 17px 5px 24px 22px;
    margin-top: 28px;
}

.gg_box .title {
    padding-bottom: 20px !important;
    border-bottom: 1px solid #D8D8D8;
    font-size: 16px;
    font-weight: bold;
}

.gg_box .list {
    margin-top: 24px;
    display: flex;
    align-items: center;
    color: #6E789A;
    font-size: 13px;
    cursor: pointer;
}

.gg_box .list:hover {
    color: #3A86F4;
}

.gg_box .line_box {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(58, 134, 244, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4px;

}

.gg_box .line_box p {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3A86F4;
}

.gg_box .text {
    width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gg_box .name {
    margin: 0 40px 0 30px !important;
}

/*取保金额统计*/
.zl_box .tj_box {
    border-radius: 5px;
    box-shadow: 2px 2px 5px 5px rgba(147, 147, 147, 0.1);
    padding: 0 22px;
}

.zl_box .tj_box .title {
    font-size: 16px;
    color: #3D3D3D;
    height: 57px;
    line-height: 57px;
    font-weight: bold;
}

.zl_box .date {
    height: 27px;
    border-radius: 8px;
    border: 1px solid #DBDBDB;
    border-radius: 8px;
    color: #5F6165;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
}

.zl_box .tj_box .lm_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.zl_box .tj_box .lm_box .lm {
    display: flex;
    width: 221px;
    height: 30px;
    border-radius: 20px;
    border: 1px solid #DBDBDB;
    color: #007AFF;
}

.zl_box .tj_box .lm_box .lm p {
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
}

.zl_box .tj_box .lm_box .lm .on {
    background: #007AFF;
    color: #fff;
}

.zl_box .tj_box .lm_box .month {
    width: 75px;
    height: 27px;
    border-radius: 8px;
    border: 1px solid #DBDBDB;
    border-radius: 8px;
    color: #5F6165;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zl_box .tj_box .lm_box .month img {
    width: 15px;
    height: 15px;
    margin-left: 5px;
}

.zl_box .tj_box .text_price {
    margin-top: 13px !important;
    font-size: 14px;
    color: #7D8DA6;
}

/*==========审批页面============*/
.examine_content_box {
    position: relative;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #E4E4E4;
    margin: 24px;
    padding-bottom: 30px;
    background: linear-gradient(to right, #F1FAFF, rgba(255, 255, 255, 0.1));
}

.examine_content_box .top_title {
    display: flex;
    margin: 56px 0 43px 48px;
}

.examine_content_box .top_title .text_box {
    margin-left: 12px;
}

.examine_content_box .top_title .text_box .title {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
}

.examine_content_box .top_title img {
    width: 50px;
    height: 50px;
}

.examine_content_box .top_title .text_box .text {
    color: rgba(33, 36, 40, 0.4);
    font-size: 14px;
    margin-top: 4px !important
}

.examine_content_box .bj {
    position: absolute;
    right: 0;
    top: 0;
}

.examine_content_box .msg_box {
    display: inline-block;
    margin: 0 48px;
    border-bottom: 1px solid rgba(152, 158, 167, 0.25);
    padding-bottom: 32px;
}

.examine_content_box .msg_box .box1 {
    display: inline-block;
}

.examine_content_box .msg_box .title {
    color: rgba(33, 36, 40, 0.4);
    font-size: 16px;
    margin-bottom: 12px !important;
}

.examine_content_box .msg_box .text {
    font-size: 18px;
    color: rgba(33, 36, 40, 0.9);
    font-weight: bold;
}

.examine_content_box .msg_box .line {
    display: inline-block;
    width: 1px;
    height: 33px;
    background: rgba(152, 158, 167, 0.25);
    margin: 0 88px !important;
}

.examine_content_box .price_box {
    display: flex;
    margin-top: 32px;
    justify-content: space-between;
}

.examine_content_box .price_box .price {
    color: #FF3D00;
    font-size: 40px;
    font-weight: bold;
}

.examine_content_box .price_box .price span {
    font-size: 24px;
    color: rgba(33, 36, 40, 0.25);
}

.examine_content_box .list_box {
    margin: 44px 48px 0 48px;
    height: 160px;
    position: relative;
}

.examine_content_box .list {
    display: inline-block;
    margin-right: 100px;
}

.examine_content_box .list:last-child {
    margin-right: 0;
}

.examine_content_box .list .top {
    display: flex;
    align-items: center;
}

.examine_content_box .list .top .num {
    font-size: 50px;
    background: -webkit-linear-gradient(#ACBAC5, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    margin-right: 7px !important;
}

.examine_content_box .list .top .text {
    color: rgba(33, 36, 40, 0.4);
    font-size: 14px;
}

.examine_content_box .list .top .title {
    font-size: 18px;
    color: rgba(33, 36, 40, 0.9);
    margin-top: 4px !important;
    font-weight: bold;
}

.examine_content_box .list .line_box {
    display: flex;
    align-items: center;
    margin-left: 14px;
    margin-top: 10px;
}

.examine_content_box .list .line_box .quan {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #0F88F8 0%, rgba(15, 136, 248, 0) 100%);
    border-radius: 50%;
    margin-right: 4px !important;
}

.examine_content_box .list .line_box .line {
    width: 171px;
    height: 4px;
    background: linear-gradient(90deg, #0F88F8 0%, rgba(15, 136, 248, 0) 100%);
}

.examine_content_box .list .status {
    margin-top: 12px;
    color: #212428;
    font-size: 16px;
    position: absolute;
    bottom: 0;
}

.examine_content_box .list .status .label {
    display: block;
    width: 52px;
    height: 26px;
    line-height: 26px;
    background: linear-gradient(to right, #4ECC85, #3BA962);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 3px !important;
    text-align: center;
    color: #fff;
    font-size: 14px;
}
.daxie{
    display: flex;
    p{
        display: flex;
    }
}
</style>
  